<template>
  <div class="pingjiaquanxianshezhi">
    <div class="header">评价权限设置</div>
    <div class="main">
      <el-form :model="form" label-width="120px">
        <el-form-item label="班主任可见权限:">
          <el-checkbox-group v-model="form.type">
            <el-checkbox
              label="班主任可见班级内其他老师发布的评语"
              name="type"
            />
          </el-checkbox-group>
        </el-form-item>

        <el-form-item label="评语发起权限:">
          <el-checkbox-group v-model="form.type">
            <el-checkbox label="班主任(评价任教班主任班级的学生)" name="type" />
            <el-checkbox label="任教老师(评价任教内班级的学生)" name="type" />
            <el-checkbox
              label="指定老师(评价全校学生如巡课老师生)"
              name="type"
            />
          </el-checkbox-group>
        </el-form-item>

        <!-- 下拉选择 -->
        <el-select
          v-model="value"
          class="m-2"
          placeholder="请选择指定老师"
          size="large"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form>

      <div class="bottom">
        <el-button class="button" type="primary">保存</el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from "vue";
import { ref } from "vue";

const value = ref("");

// do not use same name with ref
const form = reactive({
  name: "",
  region: "",
  date1: "",
  date2: "",
  delivery: false,
  type: [],
  resource: "",
  desc: "",
});
const options = [
  {
    value: "Option1",
    label: "王美丽",
  },
  {
    value: "Option2",
    label: "李大安",
  },
  {
    value: "Option3",
    label: "李勤勤",
  },
  {
    value: "Option4",
    label: "张果味",
  },
];

const onSubmit = () => {
  console.log("submit!");
};
</script>

<style scoped>
.header {
  margin-top: 10px;
  margin-bottom: 20px;
  font-weight: 700;
}
.bottom .button {
  margin-left: 120px;
  margin-top: 80px;
}
.main .m-2 {
  margin-left: 120px;
}
</style>